<template>
  <div class="user-group-role-page-table">
    <qc-page-table
      ref="userGroupRolePageTableRef"
      :columns="columns"
      :loadData="loadData"
      :rowKey="(record) => record[primaryKey]"
    >
      <template #toolbarTitle>
        {{ t('org.user-group-role.userGroupRoleTableTitle') }}
      </template>
      <template #toolbarButton>
        <qc-add-button @click="addDept">
          {{ t('org.user-group-role.addDeptBtn') }}
        </qc-add-button>
        <qc-add-button @click="addUser">
          {{ t('org.user-group-role.addUserBtn') }}
        </qc-add-button>
        <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
      </template>
    </qc-page-table>
    <dept-tree-modal
      v-if="visibleDeptModal"
      v-model:visible="visibleDeptModal"
      @ok="handleDeptOk"
      :disabledKeys="disabledKeys"
    ></dept-tree-modal>
    <user-select-modal
      v-model:value="visibleUserModal"
      :roleId="roleId"
      @selectUserOk="handleUserOk"
    ></user-select-modal>
  </div>
</template>

<script lang='ts'>
import { useI18n } from 'vue-i18n'
import { defineComponent, onMounted, ref, toRefs, reactive, Ref } from 'vue'
import { roleUserGorupTableColumns } from '../inteface'
import userGroupRoleApi from '/@/api/org/user-group-role'
import { useModelPageTable } from '/@/kit/model-kit'
import DeptTreeModal from '/@/views/org/dept/component/dept-tree-modal.vue'
import UserSelectModal from '/@/views/org/user/component/user-select-modal.vue'
export default defineComponent({
  name: 'RoleUserGroup',
  props: {
    roleId: String, //角色id
  },
  components: {
    DeptTreeModal,
    UserSelectModal,
  },
  setup(props) {
    const { t } = useI18n()
    const userGroupRolePageTableRef: Ref<any> = ref(null)
    const queryParam = { roleId: props.roleId }
    const { primaryKey, searchTable, loadData, deleteSelectData, reloadTable } = useModelPageTable(
      userGroupRolePageTableRef,
      userGroupRoleApi,
      queryParam
    )
    const userGroupRoleState = reactive({
      //用户组角色关联
      columns: roleUserGorupTableColumns,
      primaryKey,
      //加载数据方法
      loadData,
      visibleDeptModal: false,
      visibleUserModal: false,
      disabledKeys: [] as Array<string>,
      //新增角色部门关联
      addDept: () => {
        let params = { ...queryParam, userGroupType: 'DEPT' }
        userGroupRoleApi.list(params).then((res) => {
          let arr: Array<string> = []
          res.data.data.forEach((item: any) => arr.push(item.userGroupId))
          userGroupRoleState.disabledKeys = arr
          userGroupRoleState.visibleDeptModal = true
        })
      },
      //新增部门保存触发事件
      handleDeptOk: (kyes: Array<string>) => {
        let userGroupRoleList = []
        kyes.forEach((key) => {
          userGroupRoleList.push({
            roleId: props.roleId,
            userGroupId: key,
            userGroupType: 'DEPT',
          })
        })
        userGroupRoleState.insertBatchUserGroupRole(userGroupRoleList)
      },
      //新增用户关联
      addUser: () => {
        userGroupRoleState.visibleUserModal = true
      },
      handleUserOk: (userList: Array<any>) => {
        let userGroupRoleList = []
        userList.forEach((user) => {
          userGroupRoleList.push({
            roleId: props.roleId,
            userGroupId: user.userId,
            userGroupType: 'USER',
          })
        })
        userGroupRoleState.insertBatchUserGroupRole(userGroupRoleList)
      },
      //批量插入用户组信息
      insertBatchUserGroupRole: (userGroupRoleList: Array<any>) => {
        userGroupRoleApi.addBatch(userGroupRoleList).then((res) => {
          reloadTable()
          userGroupRoleState.visibleDeptModal = false
          userGroupRoleState.visibleUserModal = false
        })
      },
      //删除角色用户组关联
      deleteButtonClick: () => deleteSelectData(),
    })
    onMounted(() => searchTable())
    return {
      t,
      roleId: props.roleId,
      userGroupRolePageTableRef,
      ...toRefs(userGroupRoleState),
    }
  },
})
</script>
<style lang="less" scoped>
::v-deep(.qc-table-toolbar-container) {
  padding-top: 0px !important;
}

::v-deep(.ant-card-body) {
  padding: 0px !important;
}
</style>
